<template>
	<view class="main">
		<gui-a-header title="保障金年审" bg="transparent"></gui-a-header>
		<view class="warp">
			<view class="header">
				<view class="txt_box">
					<view class="f60 mt40 cfff gui-bold">
						保障金年审
					</view>
					<view class="f28 cfff mt20">
						为残疾人做好长期扶持
					</view>
				</view>
				<image class="zycp_img" src="@/static/image/baozhangjin_bg.png" mode="widthFix"></image>
			</view>
			<!-- <view class="con_box">
				<view class="f26 lineHeight200">
					无论是在职场中还是生活中我们的目光总能被这些自带“聚光灯”特质的人所吸引独特而醒目的个性特征对某些领域或专业了如指掌做事全神贯注、精益求精
					既能把控大局，又能hold住细节善于照顾他人感受......
					这些人一出场，就会令人留下深刻的印象。
				</view>
				<view class="f26 lineHeight200 mt20">
					而你在职场中所展现出的态度与风格是否能够转化成你
					的核心竞争力?你又具有哪些核心的优势和价值?
				</view>
				<view class="f26 lineHeight200 mt20">
					完成职业风格测评
					既可以帮助你找到赢得职场机会的突破
					又可以快速向企业方展示你的风格特点
					实现个人职业道路上的弯道超车
				</view>
			</view> -->
			<view class="btn_list">
				<view class="item gui-flex gui-justify-content-center gui-align-items-center cfff bg_1"
					@tap="$u.to('/pages/index/security-deposit/security-notice')">
					<text class="title z-index1">年审公告</text>
				</view>
				<view class="item gui-flex gui-justify-content-center gui-align-items-center cfff bg_2"
					@tap="webPageTo">
					<text class="title z-index1">开始年审</text>
				</view>
			</view>
			<!-- <view class="btn_warp mt40">
				<button class="saveBtn" @tap="webPageTo">开始年审</button>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	const $u = reactive(inject('$u'))

	const webPageTo = () => {
		$u.to(
			`/pages/webView/webView?pagetype=1`)
	}
</script>

<style lang="scss">
	page,
	.main {
		width: 750rpx;
		height: 100%;
		background: linear-gradient(180deg, #0034C7 0%, #4072FE 100%);
	}

	.header {
		box-sizing: border-box;
		position: relative;
		height: 320rpx;
		padding: 70rpx 40rpx 0 40rpx;
	}

	.zycp_img {
		position: absolute;
		right: 30rpx;
		bottom: -38rpx;
		width: 310rpx;
		z-index: 9;
	}

	.con_box {
		width: 672rpx;
		min-height: 714rpx;
		background: #F5F7FC;
		box-shadow: 0px 3 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 14rpx;
		margin: 0 auto;
		position: relative;
		top: -10rpx;
		box-sizing: border-box;
		padding: 58rpx 38rpx;
		color: #4072FE;

		.lineHeight200 {
			line-height: 200%;
		}
	}

	.saveBtn {
		width: 672rpx;
		background: #0034C7;
		font-size: 30rpx;
	}
	
	.btn_list {
		padding: 0 40rpx;
		margin-top: 100rpx;
		
		.item {
			height: 180rpx;
			border-radius: 18rpx;
			margin-bottom: 40rpx;
			
			.title {
				font-size: 32rpx;
			}
		}
	}
	
		
	.bg_1 {
		background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%);
	}
	
	.bg_2 {
		background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
	}
</style>